<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem"/>
  </div>
<!--  发票详情-->
  <el-dialog v-model="invoiceInfoVisible" :title="title" style="width: 1100px" :before-close="handleClose">
<!--    未开发票-->
    <div style="padding-left: 20px" v-if="invoiceInfo.data.statusCode !== 'effective'">
      <el-row style="color: #303133;font-size: 13px;padding-top: 14px">
        <el-col :span="8"><span>关联订单：{{invoiceInfo.data.orderNum || ''}}</span></el-col>
        <el-col :span="8"><span>票据类型：{{invoiceInfo.data.titleTypeCode === 'enterprise'? '企业发票' : '个人发票'}}</span></el-col>
        <el-col :span="8"><span>发票抬头：{{invoiceInfo.data.title}}</span></el-col>
      </el-row>
      <el-row style="color: #303133;font-size: 13px;padding-top: 14px">
        <el-col :span="8"><span>纳税识别号：{{invoiceInfo.data.taxIdentificationNumber}}</span></el-col>
        <el-col :span="8"><span>企业地址：{{invoiceInfo.data.address}}</span></el-col>
        <el-col :span="8"><span>企业电话：{{invoiceInfo.data.mobile}}</span></el-col>
      </el-row>
      <el-row style="color: #303133;font-size: 13px;padding-top: 14px">
        <el-col :span="8"><span>开户银行：{{invoiceInfo.data.bankName}}</span></el-col>
        <el-col :span="8"><span>开户账号：{{invoiceInfo.data.bankAccount}}</span></el-col>
      </el-row>
      <!-- <div>
        <el-form-item label="发票：">
          <el-image :src="getImageUrl(imageUrl)" alt="" style="width: 236px; height: 150px"
                    :preview-src-list="imageUrlList"></el-image>
        </el-form-item>
      </div> -->
    </div>
<!--    已开发票-->
    <div style="padding-left: 20px" v-if="invoiceInfo.data.statusCode === 'effective'">
      <el-row style="color: #303133;font-size: 13px;padding-top: 14px">
        <el-col :span="8"><span>关联订单：{{invoiceInfo.data.orderNum || ''}}</span></el-col>
        <el-col :span="8"><span>票据类型：{{invoiceInfo.data.titleTypeCode === 'enterprise'? '企业发票' : '个人发票'}}</span></el-col>
        <el-col :span="8"><span>发票编号：{{invoiceInfo.data.invoiceNumber}}</span></el-col>
      </el-row>
      <el-row style="color: #303133;font-size: 13px;padding-top: 14px">
        <el-col :span="8"><span>发票抬头：{{invoiceInfo.data.title}}</span></el-col>
        <el-col :span="8"><span>纳税识别号：{{invoiceInfo.data.taxIdentificationNumber}}</span></el-col>
        <el-col :span="8"><span>开票金额：{{invoiceInfo.data.price}}</span></el-col>
      </el-row>
      <el-row style="color: #303133;font-size: 13px;padding: 14px 0">
        <el-col :span="8"><span>开票日期：{{invoiceInfo.data.invoicingDate}}</span></el-col>
      </el-row>
      <div>
        <el-form-item label="发票：">
          <el-image :src="getImageUrl(imageUrl)" alt="" style="width: 236px; height: 150px"
                    :preview-src-list="imageUrlList"></el-image>
        </el-form-item>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="invoiceInfoVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
<!--  上传发票-->
  <el-dialog v-model="invoiceUploadDialog.dialogVisible" title="上传发票" @close="handleClose">
    <el-form ref="invoiceRef" label-width="100px" :model="invoiceForm" :rules="invoiceRules">
      <el-form-item label="发票" prop="invoiceUrl">
        <imageUpload ref="imageUploadRef" :limit="1" :fileSize="2"/>
      </el-form-item>
      <el-form-item label="发票编号" prop="invoiceNumber">
        <el-input v-model="invoiceForm.invoiceNumber" placeholder="请输入发票编号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="invoiceUploadDialog.confirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import imageUpload from '@/components/ImageUpload'
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { download } from "@/utils/request";
import {
  tableItem,
  operationItem, invoiceDetailApi, invoiceUploadApi, invoiceInvalidApi, invoiceReapplyApi
} from './const.js'
import { ElMessage } from 'element-plus'
import newDialog from "@/hooks/useDialog";
import {downloadFileFromURL} from '@/utils'
const router = useRouter()
const { proxy } = getCurrentInstance();
const imageUploadRef = ref(null)
const title = ref('');
const invoiceInfo = reactive({data:{}})
const invoiceInfoVisible = ref(false);
const imageUrl = ref('');
const imageUrlList = ref([])
const invoiceRef = ref('')
const invoiceForm = reactive({
  id: "",
  invoiceNumber: "",
  invoiceUrl: ""
})
const invoiceRules = reactive({
  invoiceNumber: [{ required: true, message: '请输入发票编号', trigger: 'blur' }],
  // invoiceUrl: [{ required: true, message: '请选择发票', trigger: 'blur' }]
})
const invoiceUploadDialog = newDialog(invoiceRef, invoiceForm, invoiceRules);
invoiceUploadDialog.doConfirm = (request) => {
  request.id = invoiceForm.id
  let file = imageUploadRef.value.fileList[0];
  request.invoiceUrl = file.raw.url;
  invoiceUploadApi(request).then((res) => {
    ElMessage({ message: res.msg, type: "success" })
    tableItem.pageInfo.paging()
    handleClose()
  });
}
const handleClose = () => {
  reset();
  if (imageUploadRef.value) {
    imageUploadRef.value.cleanFileList()

  }
  invoiceInfoVisible.value = false;
  invoiceUploadDialog.close()
}
const getTestData = () => {
  imageUrlList.value = []
  let testData = 'https://hhkj2022.oss-cn-shanghai.aliyuncs.com/question/569539d1-57a6-4119-8f62-7dcedf1331d41698736749187'
  imageUrl.value = testData
  imageUrlList.value.push(testData)
}
// 搜索
operationItem.menuArray[0].handle = () => {
  clickSearch()
}
// 导出
operationItem.menuArray[1].handle = () => {
  clickExport()
}
//查看
tableItem.btnArray[0].handle = (row) => {
  clickView(row)
}
//上传发票
tableItem.btnArray[1].handle = (row) => {
  invoiceForm.id = row.id
  invoiceUploadDialog.show()
}
//下载发票
tableItem.btnArray[2].handle = (row) => {
  downloadInvoice(row)
}
//重新申请
tableItem.btnArray[3].handle = (row) => {
  reapplyInvoice(row)
}
//作废发票
tableItem.btnArray[4].handle = (row) => {
  destroyInvoice(row)
}
function getImageUrl(url) {
  return new URL(url, import.meta.url).href
}
const destroyInvoice = (row) => {
  proxy.$modal.confirm('确认要作废该发票吗？').then(function () {
    return invoiceInvalidApi(row.id)
  }).then(() => {
    proxy.$modal.msgSuccess('操作成功');
    tableItem.pageInfo.paging()
  }).catch(() => { });
}
const reapplyInvoice = (row) => {
  proxy.$modal.confirm('确认要重新申请该发票吗？').then(function () {
    return invoiceReapplyApi(row.id)
  }).then(() => {
    proxy.$modal.msgSuccess('操作成功');
    tableItem.pageInfo.paging()
  }).catch(() => { });
}
function clickView(row) {
  invoiceInfoVisible.value = true
  title.value = '发票详情'
  invoiceDetailApi(row.id).then(res => {
    imageUrlList.value = []
    invoiceInfo.data = res.data
    imageUrl.value = res.data.invoiceUrl
    imageUrlList.value.push(res.data.invoiceUrl)
  })
}
function clickSearch() {
  tableItem.pageInfo.paging()
}
function clickExport() {
  let url = '/invoice/export'
  let fileName = '发票明细表'
  download(url, tableItem.pageInfo.request, fileName, {}, {})
}
function downloadInvoice(row) {
  let url = row.invoiceUrl
  downloadFileFromURL(url, 'invoice.png')
}
//清空表单
function reset() {
  // clearForm(form)
  proxy.resetForm("invoiceRef");
}
onMounted(() => {
  // getTestData()
})

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>
